<template>
  <!-- 搜索页面 -->

  <!-- 输入框 -->
  <div class="searchTop">
    <img src="@/assets/img/左箭头.svg" alt="" @click="$router.go(-1)" />
    <!-- 绑定键盘事件，回车键修改符 -->
    <input type="text" placeholder="陈奕迅" v-model="searchKey" @keydown.enter="enterKey" />
  </div>

  <!-- 历史记录 -->
  <div class="searchHistory">
    <p class="searchSpan">历史</p>
    <!-- 记录 -->
    <span v-for="item in keyWorldList" :key="item" class="spanKey" @click="searchHistory(item)">{{ item }}</span>
    <!-- 删除 -->
    <div class="icon">
      <img src="@/assets/img/删除.svg" alt="" @click="delHistory" />
    </div>
  </div>

  <!-- 歌单 -->
  <div class="itemList">
    <div class="item" v-for="(item, i) in searchList" :key="i" @click="updateIndex(item)">
      <!-- 点击将歌曲信息传递给播放列表 -->
      <div class="itemLeft">
        <!-- 编号 -->
        <span class="leftSpan">{{ i + 1 + '.' }}</span>
        <div>
          <!-- 歌曲名称 -->
          <p>{{ item.name }}</p>
          <!-- 作者 -->
          <span v-for="(item1, index) in item.artists" :key="index">{{ item1.name }}</span>
        </div>
      </div>
      <!-- mv 图标 -->
      <div class="itemRight">
        <!-- mv图标 -->
        <div class="icon bofang" aria-hidden="true" v-if="item.mvid != 0">
          <img src="@/assets/img/播放MV.svg" alt="" />
        </div>
        <!-- 更多 -->
        <div class="icon liebiao" aria-hidden="true">
          <img src="@/assets/img/首页.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
  <!--  -->
</template>

<script>
// 引入请求数据的文件
import { getMusichMusic } from '@/request/api/home.js'

export default {
  data() {
    return {
      // 用来保存，搜索的历史
      keyWorldList: [],
      searchKey: '', // 关键字
      searchList: [], // 搜索列表
    }
  },
  // 生命周期
  mounted() {
    // 在页面渲染时，读取 localStorage 里面存放的数据
    // 记得，将字符串，转换为 js 对象
    // 注意：如果 数组为空，unshift 或 push 就会报错，因为找不到数据，赋值就会失败
    // 解决方法：判断，如果为空就是本身，否则就是传的对象
    // 如果 localStorage 有值，就是本身，若没值就是数组
    this.keyWorldList = JSON.parse(localStorage.getItem('keyWorldList')) ? JSON.parse(localStorage.getItem('keyWorldList')) : []
  },

  // 方法
  methods: {
    // 回车事件
    async enterKey() {
      // 判断，如果关键字为空就什么都不做
      if (this.searchKey !== '') {
        // 将用户输入的关键字，push 追加到数组末尾，
        // unshift:将数据追加到数组起始位置
        this.keyWorldList.unshift(this.searchKey)
        // 数组去重，在保存 到 localStorage 之前，使用 es6的语法 set
        this.keyWorldList = [...new Set(this.keyWorldList)]

        // 固定长度
        if (this.keyWorldList.length > 10) {
          // 如果超过了这个长度，就删除末尾的一个
          // splice：从哪开始删除，删除几个
          this.keyWorldList.splice(this.keyWorldList.length - 1, 1)
        }

        // 将记录保存到 localStorage 里面,将js 对象转换为 字符串
        localStorage.setItem('keyWorldList', JSON.stringify(this.keyWorldList))

        // 请求数据，将关键字传入
        const res = await getMusichMusic(this.searchKey)
        this.searchList = res.data.result.songs
        console.log(res)

        // 清空文本框的记录
        this.searchKey = ''
      }
    },

    // 删除历史记录
    delHistory() {
      // 删除 localStorage 里面保存的数据
      localStorage.removeItem('keyWorldList')
      // 本身数组清空
      this.keyWorldList = []
    },

    // 搜索历史点击事件
    async searchHistory(item) {
      // 请求数据，将关键字传入
      const res = await getMusichMusic(item)
      this.searchList = res.data.result.songs
      console.log(res)
    },

    // 点击歌曲播放事件
    updateIndex(item) {
      // 将新的歌曲数据传递过去，图片等
      item.al = item.album
      item.al.picUrl = item.album.artist.img1v1Url
      // 提交，到vuex 中 pushPlayList 函数里面
      this.$store.commit('pushPlayList', item)
      this.$store.commit('updatePlayListIndex', this.$store.state.playList.length - 1)
    },
  },
}
</script>

<style lang="less" scoped>
// 输入框
.searchTop {
  width: 100%;
  height: 1rem;
  padding: 0.2rem;
  // 弹性布局
  display: flex;
  // 垂直居中
  align-items: center;

  input {
    margin-left: 0.2rem;
    // 不需要边框
    // border: none;
    // 底部边框
    border-bottom: 2px rgb(7, 7, 7) !important;
    width: 95%;
    height: 2rem;
    padding: 0.1rem;
    text-align: left;
    font-size: 1.2rem;
    background-color: #f2f2f2;
  }
}

// 历史记录
.searchHistory {
  width: 100%;
  padding: 0.2rem;
  position: relative;
  // 历史
  .searchSpan {
    font-size: 0.4rem;
    font-weight: 700;
  }
  // 记录
  .spanKey {
    padding: 0.1rem 0.5rem;
    margin: 0.5rem 0.3rem;
    background-color: rgb(223, 165, 165);
    border-radius: 0.4rem;
    // 记录变为行内块元素
    display: inline-block;
  }
  // 删除
  .icon {
    display: inline;
    position: absolute;
    right: 0.2rem;
    img {
      width: 1.5rem;
    }
  }
}

// 歌单
.itemList {
  width: 100%;
  padding: 0.2rem;
  margin-top: 2rem;

  .item {
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 歌曲间距
    padding: 2rem;
    .itemLeft {
      width: 85%;
      height: 100%;
      display: flex;
      align-items: center;

      .leftSpan {
        display: inline-block;
        width: 0.2rem;
        text-align: center;
      }
      div {
        p {
          width: 5.6rem;
          height: 1.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 800;
          padding-bottom: 1.5rem;
        }
        span {
          font-weight: 400;
          font-size: 0.01rem;
          color: #999;
        }
        margin-left: 1.5rem;
      }
    }

    .itemRight {
      width: 20%;
      height: 100%;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      position: relative;
      .icon {
        fill: #999;
      }
      // 播放图标
      .bofang {
        position: absolute;
        left: 0;
        img {
          width: 1.5rem;
        }
      }
      // 更多图标
      .liebiao {
        position: absolute;
        right: 0;
        img {
          width: 1.5rem;
        }
      }
    }
  }
  .item:hover {
    background-color: #ccc;
  }
}

</style>
